<template>
  <div>
    <div class="slider-banner banner">
      <swiper
        :options="swiperOption"
        ref="mySwiper"
      >
        <swiperSlide
          v-for="(item, index) in storeInfo.slider_image"
          :key="index"
        >
          <van-image
            width="100%"
            height="100%"
            fit="cover"
            :src="item"
          />
        </swiperSlide>
        <div
          class="swiper-pagination"
          slot="pagination"
        ></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { getProductDetail } from "@/api/goods.js";
import GoodList from "@/components/GoodList";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    GoodList,
    swiper,
    swiperSlide
  },
  data() {
    return {
      title: "详情",
      par: {},
      slider_image: [],//轮播图
      storeInfo: {},//商品详情
      similarity: [],//推荐商品
      swiperOption: {
       loop:true,


      },
    };
  },
  metaInfo() {
    return {
      title: this.title,
    };
  },
  mounted() {
    this.title = this.$route.query.title;
    this.par.id = Number(this.$route.query.id);
    this.$nextTick(() => {
      this.getdata();
    });
  },
  created() { },
  methods: {
    async getdata() {
      try {
        const back = await getProductDetail(this.par.id);
        if (back.status == 200) {
          this.storeInfo = back.data.storeInfo
          this.similarity = back.data.similarity
        }
      } catch (err) {
        console.error(err);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-slide{
    width: 100%;
}
</style>
